<template>
	<div class='swiper-list'>
		<swiper class="swiper" :options="swiperOption">
			<swiper-slide 
				v-for='(item,index) in list'
				:key='index'
			>
				<img :src="item.imgUrl" alt="">
			</swiper-slide>
		</swiper>
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
	props:{
		list:Array
	},
	data() {
		return {
			swiperOption: {
				autoplay: 3000,
				speed: 1000,
				pagination: {
					el: '.swiper-pagination'
				}
			}
		}
	},
	components: {
		swiper,
		swiperSlide
	}
}
</script>

<style scoped>
.swiper-list{
	position: relative;
}
.swiper img{
	width: 100%;
	height: 4.32rem;
}
.swiper-pagination{
	width: 100%;
	bottom:0.266666rem;
	text-align: center;
}
::v-deep .swiper-pagination-bullet{
	margin:0 0.08rem;
	background-color: #fff;
}
::v-deep .swiper-pagination-bullet-active{
	background-color: red;
}
</style>